<script setup lang="ts">
import { reactive } from "vue";
import { ElMessage } from "element-plus";

import { adminUser, identity } from "../../stores/identity";
import { useRouter } from 'vue-router';
import { requestAxios } from "../../axios";
import { requestBody } from "../../interface/request";

const router = useRouter();
const form = reactive({
  adminId: "",
  password: "",
});

const LoginRequest=(admin:any)=>{
    requestAxios.post("/login",admin).then((res:requestBody)=>{
        if(res.code!==0){
            ElMessage.error(res.msg)
            return
        }
        ElMessage.success(res.msg)
        adminUser.adminId = res.data.adminInfo.adminId;
        adminUser.name=res.data.adminInfo.name
        adminUser.profile_picture=res.data.adminInfo.profile_picture
        identity.authorization=res.data.token
        identity.isLogin=true
        router.push("/workstore")
    }).catch(err=>ElMessage.error(err))
}
</script>

<template>
  <div class="login-container">
    <el-card style="width: 400px" body-class="card-body" shadow="hover">
      <template #header>
        <div style="text-align: center">
          <span>登录管理</span>
        </div>
      </template>
      <el-form
        @keyup.enter="LoginRequest(form)"
        :model="form"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="账号">
          <el-input v-model="form.adminId" clearable />
        </el-form-item>
        <el-form-item label="密码" clearable>
          <el-input v-model="form.password" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center">
          <el-button type="primary" @click="LoginRequest(form)">登录</el-button>
          <!-- <el-button >取消</el-button> -->
        </div>
      </template>
    </el-card>
  </div>
</template>
<style scoped>
.container {
  padding: 24px;
  /* width: 100vw; */
  /* height: 100vh; */
}

.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-container {
  margin: 20px 0;
}
.table-container {
  padding: 20px;
}
.pagination-block {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
</style>
